<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat Room</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <table align="center">
    <tr>
      <td>
        <label for="username">UserName:</label>
        <input type="text" id="username"/>
      </td>
    </tr>
    <tr>
      <td>
        <label for="room">room: </label>
        <input type="text" id="room"/>
        <button id="connect">Connect</button>
        <button id="leave" disabled>Leave</button>
      </td>
    </tr>
    <tr>
      <td>
        <label for="output">Content: </label>
        <br/>
        <textarea disabled id="output" rows="10" cols="50"></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <label for="input">Input: </label>
        <br/>
        <textarea disabled id="input" rows="3" cols="50"></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <button id="send">Send</button>
      </td>
    </tr>
  </table>

  <!-- https://socket.io/docs/v4/client-installation/ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.min.js"></script>
  <script src="js/client.js"></script>
</body>
</html>
